<template>
	<view>
		<!-- 头部信息 -->
		<view class="top content">
			<view class="top-top">
				<view class="text-xxl top-title text-bold">
					{{jobDetail.name}}
				</view>
				<view class="top-money-date">
					<view class="text-xl top-money">
						{{jobDetail.recruitType=="实习"?jobDetail.minSalary+"~"+jobDetail.maxSalary:jobDetail.maxSalary}}
					</view>
					<view class="text-sm text-color-base top-date">
						{{jobDetail.createTime}}
					</view>
				</view>
			</view>
			<view class="text-md text-color-base top-labels">
				<!-- <text v-for="(item,index) in jobDetail.spanList" :key="index">{{item}}</text> -->
				<text>{{jobDetail.city}}</text>
				<text>{{jobDetail.minEducation}}</text>
				<text>{{jobDetail.qualification}}</text>
			</view>
		</view>

		<view class="null-div"></view>

		<view class="content2">
			<view class="detail-title text-bold text-xl">
				<image src="../../static/job/xq_icon.png" mode=""></image>
				<text>职位详情</text>
			</view>
			<view class="job-description text-color-base">
				{{jobDetail.description}}
			</view>
			<!-- <view class="detail-title2 text-bold text-lg">
				<text>职责</text>
			</view>
			<view class="text-md text-color-base detail-content">
				1、负责内部后台系统的需求收集、产品设计、跟进和验收；<br>
				2、关注业内优秀产品，能有效提炼方法论并应用在产品设计中；<br>
				3、以支持业务规模化为目标，对后台产品使用效率和体验指标负责；<br>
				4、将业务流程进行合理产品化，使用多种产品方法提高业务人效；<br>
				5、与相关部门合作制定产品方案，并考虑产品的拓展性和兼容性；<br>
				6、与教研、教服、营销、研发团队密切配合，共同实现业务目标。
			</view>
			<view class="detail-title2 text-bold text-lg">
				<text>要求</text>
			</view>
			<view class="text-md text-color-base detail-content">
				1、统招本科及以上学历，计算机、教育学等相关专业优先；<br>
				2、3年以上互联网产品工作经验，互联网B端产品经验突出；<br>
				3、具有产品规划及独立设计能力，对产品有自己独特的思考和见解；<br>
				4、擅长需求分析，对数据敏感，具有良好的数据分析能力和意识；<br>
				5、业务学习能力强，能快速熟悉各个业务模块，熟悉教育行业优先；
			</view>
			<view class="detail-title2 text-bold text-lg">
				<text>其他</text>
			</view>
			<view class="text-md text-color-base detail-content">
				1、三餐免费<br>
				2、免费健身<br>
				3、晚上加班免费打车
			</view> -->
			<view class="detail-title text-bold text-xl">
				<image src="../../static/job/dz_icon.png" mode=""></image>
				<text>公司地址</text>
			</view>
			<view class="detail-address text-lg text-color-base">
				{{jobDetail.address}}
			</view>
			<view class="detail-title text-bold text-xl">
				<image src="../../static/job/yx_icon.png" mode=""></image>
				<text>应聘邮箱</text>
			</view>
			<view class="detail-email text-lg text-color-base">
				<view>投递邮箱：{{jobDetail.email}}</view>
				<view>简历名称：姓名+岗位+北窗青年<text @click="copy('emailHead')">复制</text></view>
			</view>
			<view class="tip text-xs">
				<view class="tip-title">
					<image src="../../static/job/tip_icon.png" mode=""></image>
					<text>温馨提示</text>
				</view>
				<view class="tip-word">
					该招聘者承诺本职位不向您收费并保证其真实性，如有不实请及时举报
				</view>
			</view>
		</view>
		<view class="footer text-md">
			<view class="text-center">
				<button class="share-btn" type="default" open-type="share">
					<image src="../../static/job/sharewx_icon.png" mode=""></image>
					<view class="text-mm">
						分享
					</view>
				</button>
			</view>
			<view class="text-center">
				<image src="../../static/job/createimg.png" mode=""></image>
				<view class="text-mm">
					生成海报
				</view>
			</view>

			<view class="text-center" @click="delivery">
				<image src="../../static/job/shoucang_icon.png" mode=""></image>
				<view class="text-mm">
					收藏
				</view>
			</view>
			<view class="copy-btn" @click="copy('email')">
				<image src="../../static/job/copyemail.png" mode=""></image>
				<text>复制邮箱</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		copy
	} from "../../sgapi/api.js"
	export default {
		data() {
			return {
				userInfo: {},
				jobDetail: {}
			}
		},
		methods: {
			// 获取工作详情
			getJobDetail(id) {
				let data = {
					id: id
				}
				this.sgAjax.getJobDetail(data).then(res => {
					this.jobDetail = res.data
				})
			},

			// 复制
			copy(flag) {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let data = {
					id: this.jobDetail.id
				}
				this.sgAjax.copyJobHand(data).then(res => {
					uni.hideLoading()
					if (flag == 'email') {
						this.sgAjax.copy(this.jobDetail.email)
					} else {
						this.sgAjax.copy("姓名+岗位+北窗青年")
					}
				})
			},
			// 收藏
			delivery() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				let data = {
					id: this.jobDetail.id,
					action: false || true
				}
				
				this.sgAjax.putJobCollect(data).then(res => {
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title: "收藏成功！"
					}, 1500)
				})
			}
		},
		onLoad(e) {
			this.getJobDetail(e.id)
		},
		// 分享
		onShareAppMessage() {}
	}
</script>

<style scoped>
	.text-color-base {
		color: #040319;
		opacity: 0.6;
	}

	.text-bold {
		font-weight: bold;
	}

	.text-xxl {
		font-size: 40rpx;
	}

	.text-xl {
		font-size: 36rpx;
	}

	.text-lg {
		font-size: 32rpx;
	}

	.text-md {
		font-size: 28rpx;
	}

	.text-sm {
		font-size: 24rpx;
	}

	.text-xs {
		font-size: 22rpx;
	}

	.text-mm {
		font-size: 20rpx;
	}

	.text-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-wrap: wrap;
	}

	.content {
		box-sizing: border-box;
		padding: 22rpx 30rpx 0;
	}

	.content2 {
		box-sizing: border-box;
		padding: 0 30rpx 100rpx;
	}

	.top .top-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.top-title {
		width: 400rpx;
		line-height: 60rpx;
	}

	.top-money-date {
		text-align: right;
		line-height: 60rpx;
	}

	.top-money {
		color: #1B82FE;
	}

	.top-labels {
		margin: 32rpx 0;
	}

	.top-labels text {
		padding: 0 17rpx;
		border-right: 1rpx solid rgba(85, 83, 127, 0.2);
	}

	.top-labels text:nth-child(1) {
		padding-left: 0;
	}

	.top-labels text:last-child {
		border: none;
	}

	.null-div {
		height: 16rpx;
		background-color: #F8F8FA;
	}

	.detail-title image {
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
		margin-right: 8rpx;
	}

	.detail-title {
		margin-top: 32rpx;
	}

	.detail-title2 {
		margin-top: 32rpx;
		margin-bottom: 8rpx;
	}

	.detail-content {
		line-height: 46rpx;
	}

	.detail-email,
	.detail-address {
		line-height: 54rpx;
		margin: 21rpx 0 0;
	}

	.tip {
		line-height: 40rpx;
		margin: 32rpx 0 50rpx;
	}

	.tip-title {
		color: #FF5756;
	}

	.tip-title image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
		vertical-align: middle;
	}

	.detail-email text {
		font-size: 28rpx;
		padding: 8rpx 16rpx;
		color: #1B82FE;
		background-color: rgba(27, 130, 254, 0.2);
		border-radius: 4rpx;
		margin-left: 32rpx;
	}

	.footer {
		z-index: 99;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		height: 98rpx;
		border-top: 2rpx solid rgba(0, 0, 0, 0.1);
		background-color: #FFFFFF;
		justify-content: space-between;
	}

	.footer image {
		width: 60rpx;
		height: 60rpx;
		display: block;
	}

	.footer .copy-btn {
		display: flex;
		padding: 21rpx 48rpx;
		color: #FFFFFF;
		border-radius: 8rpx;
		background-color: #1B82FE;
		box-shadow: 0 8px 12px -2px rgba(0, 98, 216, 0.30);
	}

	.footer .copy-btn image {
		width: 44rpx;
		height: 44rpx;
		margin-right: 8rpx;
	}

	.job-description {
		margin-top: 32rpx;
	}

	.share-btn {
		padding: 0;
		margin: 0;
		border: none;
		background: none;
		line-height: none;
		position: flex;
		align-items: center;
		height: 98rpx;
	}

	.share-btn::after {
		border: none;
	}

	.share-btn image {
		margin-top: 10rpx;
		margin-bottom: -15rpx;
	}
</style>
